<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Mali" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Niramit" rel="stylesheet">
	<link rel="stylesheet" media="screen and (min-width:500px)" href="style.css">
	<link rel="stylesheet" media="screen and (max-width:500px)" href="phone.css">
	<title></title>
	<style>
	.barbox{
		margin: 10px 0;
		width: 80%;
		background-color: #ccc;
		border:1px solid transparent;
		border-radius: 10px;
	}
	.bar1,
	.bar2,
	.bar3{
		height: 10px;
		border:1px solid transparent;
		border-radius: 10px;
		background-color: #0FC9C3;
	}
	.bar1{
		width: 0

	}
	.bar2{
		width: 90%;
	}
	.bar3{
		width: 65%;
	}
	</style>
</head>
<body>
	<div class="info">
		<div class="nav">
			<img src="logo2.png" alt="">
			<div class="navigator">
				<li><a href="">HOME</a></li>
				<li><a href="">ABOUT</a></li>
				<li><a href="">WORK</a></li>
				<li><a href="">PROCESS</a></li>
				<li><a href="">SERVICES</a></li>
				<li><a href="">TESTIMONIALS</a></li>
				<li><a href="">CONTACT</a></li>
			</div>
			
	
		</div>
		<div class="content">
				<h1> We Design and Develop </h1>
					<p>We are a new design studio based in USA. We have over 
					20 years of combined experience, and know a thing or two 
					about designing websites and mobile apps.</p>
				<button class="button">CONTACT US</button>
			</div>
		
	</div>
	
	<div class="main">
		<h4>About Us</h4>
		<p>Divide have don't man wherein air fourth. Own itself make have night won't make.<br> 
		A you under Seed appear which good give. Own give air without fowl moveth dry first<br>
		heaven fruit, dominion she'd won't very all.</p>
		<img src="4.png">
	</div>
	
	<div class="progress">
		<div class="box1">
			<h4>Professional Skills</h4>
			<p>
				<div class="barbox">
					<div class="bar1" id="bar1"></div>
				</div>
				<span style="font-size: 16px">UI/UX Design    75%</span>
			</p>
			<p>
				<div class="barbox">
					<div class="bar2"></div>
				</div>
				<span style="font-size: 16px">web development    90%</span>
			</p>
		</div>

	</div>
	<div class="data">
			<ul>
				<li>
						<img src="icon1.png" alt="">
						<p>548</p>
						<p><span>PROJECTS COMPLETED</span></p>
				</li>
				<li>
						<img src="2.png" alt="">
						<p>1468</p>
						<p><span>TEAM CONSTRUCTION</span></p>
				</li>
				<li>
						<img src="3.png" alt="">
						<p>612</p>
						<p><span>POSITIVE FEEDBACKS</span></p>
				</li>
				<li>	
						<img src="5.png" alt="">
						<p>735</p>
						<p><span>HAPPY CUSTUMERS</span></p>
				</li>
			</ul>

		</div>
		<div class="pics">
			<li class ="pic1"><a href=""><div class="overlay">Photo1</div></a></li>
			<li class ="pic2"><a href=""><div class="overlay">Photo2</div></a></li>
			<li class ="pic3"><a href=""><div class="overlay">Photo3</div></a></li>
			<li class ="pic4"><a href=""><div class="overlay">Photo4</div></a></li>
			<li class ="pic5"><a href=""><div class="overlay">Photo5</div></a></li>
			<li class ="pic6"><a href=""><div class="overlay">Photo6</div></a></li>
			<li class ="pic7"><a href=""><div class="overlay">Photo7</div></a></li>
			<li class ="pic8"><a href=""><div class="overlay">Photo8</div></a></li>
		
		</div>
		<div class="vedio">
			<h4>Our Work Process</h4>
			<p>Was years it seasons was there form he in in them together over that, </br>
third sixth gathered female creeping bearing behold years.</p>

			<video src="https://www.bilibili.com/video/av34123235/?spm_id_from=333.334.chief_recommend.19" width="90%" controls="controls">
			</video>
		</div>
</body>
	<script>
		function move() {
 		 var elem = document.getElementById("bar1");   
  		  var width = 10;
		  var id = setInterval(frame, 10);
	  	function frame() {
		   if (width >= 75) {
		     clearInterval(id);
		   } else {
		     width++; 
		     elem.style.width = width + '%'; 
		   }
		 }
		}

		var oBody = document.getElementsByTagName('body')[0];
		var oData = document.getElementsByClassName('progress')[0];
		console.log(oData.offsetTop);
		console.log(oBody.scrollTop);
		oBody.addEventListener('mousewheel',show)
		function show(ev){
			if(ev.pageY>oData.offsetTop-300){
				move()
				oBody.removeEventListener('mousewheel',show)
			}
		}

// oBody.removeEventListener('mousewheel')


		// oBody.onmousewheel=function(event){
		// 			if(event.pageY>oData.offsetTop){
		// 				move();
		// 			}
		// 		}
		
		

	</script>
</html>